<template>
  <div class="result-container">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="我是有底线的。。。。"
      @load="onLoad"
    >
      <van-cell
        v-for="(item, index) in resultData"
        :key="index"
        :title="item.title"
      />
    </van-list>
  </div>
</template>

<script>
import { getSearchResultApi } from "@/api";
export default {
  name: "",
  props: ["value"],
  data() {
    return {
      page: 0, //  默认显示第一页
      per_page: 20, // 每一页显示多少条
      resultData: [],
      //  上拉加载组件  属性
      loading: false, //  实现上拉加载的效果
      finished: false // true就是不在触发上拉组件
    };
  },
  created() {},
  methods: {
    async getResults() {
      const { data: res } = await getSearchResultApi({
        page: ++this.page,
        per_page: this.per_page,
        q: this.value
      });

      this.resultData = [...this.resultData, ...res.data.results];
      this.loading = false; //  关闭上拉加载效果

      console.log(res, 333334422);
      if (res.data.results.length) {
        //  还可以继续获取数据  还可以继续上拉

      } else {
        //  没有数据可以获取了，就直接不让上拉组件触发
        this.finished=true
      }
    },

    //  上拉加载组件事件   初次进入就会执行
    onLoad() {
      this.getResults();
    }
  }
};
</script>
<style lang="less" scoped></style>
